<template>
  <div class="cartright">
    <div class="right">
      <div class="title">
        <h4
          style="
            text-align: left;
            font-size: 18px;
            margin-bottom: 10px;
            padding-top: 5px;
            padding-left: 5px;
          "
        >
          订单摘要:
        </h4>
        <div class="tist">
          <table>
            <tr>
              <td>商品金额:</td>
              <td>￥{{ price }}</td>
            </tr>
            <tr>
              <td>优惠金额:</td>
              <td>￥{{ favorableprice }}</td>
            </tr>
            <tr>
              <td><strong>商品总计:</strong></td>
              <td>￥{{ finalprice }}</td>
            </tr>
          </table>
        </div>
        <input
          type="button"
          value="生成订单"
          style="width: 230px; height: 50px; background-color: #000"
          class="btn"
          @click="settlement"
        />
      </div>
      <div class="tmiddle">
        <p style="font-size: 15px; text-align: left">本店全场免运费</p>
      </div>
    </div>
  </div>
</template>

<script>
import pubsub from "pubsub-js";
// import func from 'vue-editor-bridge';
export default {
  name: "CartRight",
  data() {
    return {
      datas: [],
      price: 0,
      finalprice: "0",
      favorableprice: "0",
      img: "",
      title: "",
      price1: 0,
      size:"",
      dataState:1
    };
  },
  props:{
    ["message"]:{
      type:Array,
      default: () => {
        return [];
      },
    }
  },
  methods: {
    settlement() {
      let that = this
        this.datas = this.message;
        this.datas.forEach((item)=>{
          this.$axios.post("/api/product/delShopCart",{
          shopcart_id:item.shopcart_id
        }).then((res)=>{

        }).then(()=>{

        })
        })
        this.datas.forEach((item) => {
          this.img = item.shopcart_goods_img;
          this.price1 = item.shopcart_goods_price;
          this.title = item.shopcart_goods_title;
          this.count = item.shopcart_count;
          this.size = item.shopcart_goods_size
          this.$axios
            .post("/api/order/createOrder", {
              user_id: localStorage.getItem("user_id"),
              orders_goods_img: this.img,
              orders_goods_title: this.title,
              orders_goods_price: this.price1,
              orders_goods_count: this.count,
              orders_goods_size:this.size
            })
            .then((res) => {
              that.$router.push("/order");
              this.dataState ++
              this.$bus.$emit("zhenhao",this.dataState)
            });
        });
    },
  },
  mounted() {
    pubsub.subscribe("bus1", (_, res) => {
      this.price = res;
    });
    pubsub.subscribe("bus2", (_, res) => {
      this.count = res;
    });
  },
  updated() {
    this.finalprice = this.price - this.favorableprice;
  },
};
</script>

<style scoped>
.cartright {
  margin-top: 50px;
}
.tist table tr {
  border-bottom: 1px solid #ebebeb;
}
.cartright .right {
  width: 300px;
  height: 400px;
}
.right .title {
  width: 300px;
  height: 280px;
  background-color: #ebebeb;
}
.tist table {
  background-color: #fff;
  width: 260px;
  height: 150px;
  margin: 0 auto;
}
table > tr > td:nth-child(1) {
  padding-left: 10px;
  text-align: left;
}
.title .btn {
  margin-top: 10px;
  margin-left: 35px;
  color: #fff;
}
.title .btn:hover {
  color: #ccc;
}
.right .tmiddle {
  width: 300px;
  height: 50px;
  background-color: #f9f9f9;
  margin-top: 10px;
  line-height: 50px;
}
</style>